class Util {
  blockWidth() {
    return this.config.width / this.config.limit
  }

  width(el, n) {
    n = n || this.blockWidth()
    el.style.width = n + `px`
  }
  //
  height(el, n) {
    n = n ? n : this.config.height
    el.style.height = n + `px`
  }

  //设置元素样式
  styles(el, styles) {
    for (const rule in styles) {
      el.style[rule] = styles[rule]
    }
  }
}

//写一个类，目的为了生成对象；
class Slide extends Util {
  section = []
  btns = []
  index = 0
  //每个对象都有自己的属性，构造函数可以用来传递属性；
  //配置工作
  constructor(config) {
    super()
    this.config = config
  }

  //基础工作
  run() {
    //console.log(this.config)
    this.createContainer()
    this.createSection()
    this.createSectionDiv()
    this.createSectionImage()
    this.createTextBtns()
    this.createBtnsEvent()
    this.btnEvent(3)
  }

  createContainer() {
    this.el = document.querySelector(config.el)
    this.styles(this.el, {
      width: this.width(this.el, this.config.width),
      height: this.height(this.el),
    })
  }

  //创建section块
  createSection() {
    for (let index = 0; index < this.config.limit; index++) {
      let section = document.createElement('section')
      this.styles(section, {
        width: this.width(section),
        height: this.height(section),
        transformOrigin: ` center center -${this.config.height / 2}px`,
      })

      this.section.push({ index, item: section, divs: [] })
      this.el.insertAdjacentElement('beforeEnd', section)
    }
  }
  //创建section里面的div
  createSectionDiv() {
    //使用map方式遍历
    this.section.map((section) => {
      for (let i = 0; i < this.config.images.length; i++) {
        let div = document.createElement('div')
        this.styles(div, {
          width: this.width(div),
          height: this.height(div),
          transformOrigin: ` center center -${this.config.height / 2}px`,
        })
        section.item.insertAdjacentElement('beforeEnd', div)
        section.divs.push(div)
      }
    })
  }

  //创建图片
  createSectionImage() {
    this.section.map((obj) => {
      obj.divs.map((div, i) => {
        let img = document.createElement('img')
        img.src = this.config.images[i]
        this.styles(img, { transform: `translateX( -${this.blockWidth() * obj.index}px)` })

        // img.style.transform = `translateX(${-this.blockWidth() * index}px )`
        div.insertAdjacentElement('beforeEnd', img)
      })
    })
  }

  //创建文本按钮
  createTextBtns() {
    let div = document.createElement('div')
    div.classList.add('btns')
    for (let i = 0; i < this.config.images.length; i++) {
      const span = document.createElement('span')
      span.innerText = i + 1
      div.insertAdjacentElement('beforeEnd', span)
      this.btns.push(span)

      if (this.index == i) {
        span.classList.add('active')
      }
    }
    this.el.insertAdjacentElement('beforeEnd', div)
  }

  //添加按钮事件
  createBtnsEvent() {
    for (const btn of this.btns) {
      btn.addEventListener('click', this.btnEvent.bind(this, this.btns.indexOf(btn)))
    }
  }
  //按钮点击事件
  btnEvent(index) {
    this.index = index
    this.toggleBtnActive()
    this.section.map((obj, i) => {
      setTimeout(() => {
        this.styles(obj.item, {
          transform: `rotateX(${index * 90}deg)`,
        })
      }, this.config.timeout * i)
    })
  }

  //切换按钮元素样式
  toggleBtnActive() {
    this.btns.map((btn, i) => {
      btn.classList.remove('active')
      if (i == this.index) {
        btn.classList.add('active')
      }
    })
  }
}
